<template>
  <!-- <Tooltip :title="getTitle" placement="bottom" :auto-adjust-overflow="true" :mouseEnterDelay="0.5">
    <span @click="toggle">
      <FullscreenOutlined v-if="!isFullscreen" />
      <FullscreenExitOutlined v-else />
    </span>
  </Tooltip> -->
  <span @click="toggle" class="cms-full-screen-toggle">
    <FullscreenOutlined v-if="!isFullscreen" />
    <FullscreenExitOutlined v-else />
  </span>
  <PageWrapper :contentFullHeight="true" ref="domRef" class="cms-full-screen-page">
    <CmsCategorySwipper :swippers="categorySwippers" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref, unref, onBeforeMount, onMounted, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { Tooltip } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useFullscreen } from '@vueuse/core';
  import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';

  import { PageWrapper } from '/@/components/Page';

  import CmsCategorySwipper from './CmsCategorySwipper.vue';

  import { getDisplayCategorySwippers } from '/@/api/cms/display';
  import { SwipperQueryConditionDto } from '/@/api/cms/model/swipperModel';

  export default defineComponent({
    components: {
      FullscreenExitOutlined,
      FullscreenOutlined,
      Tooltip,
      PageWrapper,
      CmsCategorySwipper,
    },
    setup() {
      const { t } = useI18n();
      const router = useRouter();

      const domRef = ref<Nullable<HTMLElement>>(null);
      const { enter, toggle, exit, isFullscreen } = useFullscreen();
      const { toggle: toggleDom } = useFullscreen(domRef);

      const categoryId = ref<string | number>();
      const categorySwippers = ref([]);

      const getTitle = computed(() => {
        return unref(isFullscreen)
          ? t('layout.header.tooltipExitFull')
          : t('layout.header.tooltipEntryFull');
      });

      //获取指定栏目的显示信息
      function getCategorySwipperData() {
        let params: SwipperQueryConditionDto = {
          cid: categoryId.value,
          count: 10,
        };
        getDisplayCategorySwippers(params)
          .then((res) => {
            // console.log('getCategorySwipperData res', res);
            categorySwippers.value = res;
          })
          .catch((ex) => {
            console.log('getDisplayCategorySwippers ex', ex);
          });
      }

      onBeforeMount(() => {
        console.log('CmsFullScreenIndex onBeforeMount');
        //获取栏目ID，先从url传参中获取，如果没有再从store中获取；可以直接输入url地址打开网页，所以先从url中获取
        //测试--获取路由地址传参 url中的参数使用params获取
        // console.log('CmsCategoryContent onBeforeMount router', router.currentRoute.value.params);
        if (router.currentRoute.value.params.id) {
          categoryId.value = router.currentRoute.value.params.id;
        }

        //从后台接口获取栏目的数据
        getCategorySwipperData();
      });
      onMounted(() => {
        // enter();
      });

      let timer = setInterval(() => {
        // console.log('CmsFullScreenIndex setInterval');
        getCategorySwipperData();
      }, 10000);

      return {
        enter,
        toggleDom,
        toggle,
        isFullscreen,
        exit,
        domRef,
        categoryId,
        getTitle,
        categorySwippers,
        getCategorySwipperData,
      };
    },
  });
</script>

<style scoped lang="less">
  @import './cms.less';
</style>
